<template>
    <d2-container :filename="filename">
        <template slot="header">
            <el-form
                    :inline="true"
                    :model="queryParam"
                    :rules="rules"
                    ref="form"
                    size="mini"
                    style="margin-bottom: -18px;">
                <el-form-item label="状态" prop="type">
                    <el-select
                            v-model="queryParam.status"
                            placeholder="状态选择"
                            style="width: 100px;">
                        <el-option label="待发布" value="DRAFT"/>
                        <el-option label="已发布" value="PUBLISHED"/>
                        <el-option label="已下架" value="CLOSED"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="类别" prop="cate_id">
                    <el-input
                            v-model="queryParam.cate_id"
                            placeholder="类别名称"
                            style="width: 100px;"/>
                </el-form-item>
                <el-form-item label="品牌" prop="brand_id">
                    <el-input
                            v-model="queryParam.brand_id"
                            placeholder="品牌名称"
                            style="width: 120px;"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary">
                        <d2-icon name="search"/>
                        查询
                    </el-button>
                </el-form-item>
                <el-form-item>
                    <el-button>
                        <d2-icon name="refresh"/>
                        重置
                    </el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="warning" @click="goto('/goods/product/add');">
                        <d2-icon name="plus"/>
                        添加新商品
                    </el-button>
                </el-form-item>
            </el-form>
        </template>

        <!--table-->
        <el-table v-loading="listLoading" :data="tableData"
                  border fit highlight-current-row style="width: 100%;">

            <el-table-column label="编号" width="180" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.id }}</span>
                </template>
            </el-table-column>

            <!--<el-table-column label="主图" width="180" align="center">
                <template slot-scope="scope">
                    <img :src="scope.row.major_img_url" style="height: 80px;: 10px;">
                </template>
            </el-table-column>-->

            <el-table-column label="货号" width="120" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{ scope.row.cargo_no }}</span>
                </template>
            </el-table-column>

            <el-table-column label="状态" width="180" align="center">
                <template slot-scope="scope">
                    <el-tag size="mini" :type="scope.row.status | statusTypeFilter">
                        {{ scope.row.status | statusValueFilter}}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column label="所属店铺" width="120" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{ scope.row.shop_id }}</span>
                </template>
            </el-table-column>

            <el-table-column label="类别编号" width="120" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{ scope.row.category_id }}</span>
                </template>
            </el-table-column>

            <el-table-column label="品牌编号" width="120" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{ scope.row.brand_id }}</span>
                </template>
            </el-table-column>


            <el-table-column label="标题" width="120" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.title}}/{{scope.row.sub_title}}</span>
                </template>
            </el-table-column>

            <el-table-column label="总库存" width="120" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.total_stock}}</span>
                </template>
            </el-table-column>

            <el-table-column label="总租赁次数" width="120" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.total_lease_times}}</span>
                </template>
            </el-table-column>

            <el-table-column label="上架时间" width="150" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.list_start_time}}</span>
                </template>
            </el-table-column>

            <el-table-column label="下架时间" width="150" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.list_end_time}}</span>
                </template>
            </el-table-column>

            <el-table-column label="排序值" width="120" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.sorted}}</span>
                </template>
            </el-table-column>

            <!--<el-table-column label="标签" width="120" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <el-tag
                            :key="tag"
                            v-for="tag in scope.row.__tags"
                            :disable-transitions="false">
                        {{tag}}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column label="关键字" width="120" align="center" >
                <template slot-scope="scope">
                    <el-tag
                            :key="tag"
                            v-for="tag in scope.row.__keywords"
                            :disable-transitions="false">
                        {{tag}}
                    </el-tag>
                </template>
            </el-table-column>-->


            <el-table-column label="操作" fixed="right" min-width="150px" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" plain icon="el-icon-view"
                               type="primary">查看详情
                    </el-button>
                </template>
            </el-table-column>

        </el-table>
        <template slot="footer">
            <pagination v-show="total>0"
                        :total="total"
                        :page.sync="queryParam.current"
                        :limit.sync="queryParam.size"
                        @pagination="getList"/>
        </template>
    </d2-container>
</template>

<script>
    import {page} from "@/api/goods/product";
    import Pagination from '@/components/Pagination'
    import {statusKeyValue, statusMap} from "./common";

    export default {
        name: "product-list",
        components: {
            Pagination
        },
        filters: {
            statusTypeFilter(status) {
                return statusMap[status];
            },
            statusValueFilter(status) {
                return statusKeyValue[status];
            },
        },
        data() {
            return {
                filename: __filename,
                listLoading: false,
                tableData: [],
                total: 0,
                queryParam: {
                    current: 1,
                    size: 10,
                    status: undefined,
                    cate_id: undefined,
                    brand_id: undefined
                }
            }
        },
        created() {
            this.getList();
        },
        methods: {
            getList() {
                this.listLoading = true;
                page(this.queryParam).then(res => {
                    res.records.forEach(ele => {
                        ele.__tags = ele.tags.split(',');
                        ele.__keywords = ele.keywords.split(',');
                    });
                    this.tableData = res.records;
                    this.total = parseInt(res.total);
                    this.listLoading = false;
                })
            },
            goto(path) {
                this.$router.push(path);
            }
        }
    }
</script>

<style scoped>

</style>
